﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link href="styles/task1.css" rel="stylesheet" />
    <script src="jquery-1.9.0.js"></script>
    <script>
        $(function onDocumentReady() {
            $("header nav > ul > li > a").on("click", function onNavItemClick(e) {
                if (!$(this).parent().hasClass("selected")) {
                    $("header nav ul li.selected").removeClass("selected");
                    $(this).parent().addClass("selected");
                }

                if (e.preventDefaults) {
                    e.preventDefaults();
                }
                return false;
            });
        });
    </script>
</head>
<body>
    <div id="wrapper">
        <header>
            <nav>
                <ul>
                    <li class="selected">
                        <a href="#">Nav item #1 </a>
                        <ul>
                            <li>
                                <a href="#">Sub nav item #1.1 </a>
                                <ul>
                                    <li>
                                        <a href="#">Dropdown Item #1.1.1</a>
                                    </li>
                                    <li>
                                        <a href="#">Dropdown Item #1.1.2</a>
                                    </li>
                                    <li>
                                        <a href="#">Dropdown Item #1.1.3</a>
                                    </li>
                                    <li>
                                        <a href="#">Dropdown Item #1.1.4</a>
                                    </li>
                                </ul>
                            </li>
                            <li>
                                <a href="#">Sub nav item #1.2 </a>
                                <ul>
                                    <li>
                                        <a href="#">Dropdown Item #1.2.1</a>
                                    </li>
                                    <li>
                                        <a href="#">Dropdown Item #1.2.2</a>
                                    </li>
                                    <li>
                                        <a href="#">Dropdown Item #1.2.3</a>
                                    </li>
                                    <li>
                                        <a href="#">Dropdown Item #1.2.4</a>
                                    </li>
                                </ul>
                            </li>
                            <li>
                                <a href="#">Sub nav item #1.3 </a>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <a href="#">Nav item #2 </a>
                    </li>
                    <li>
                        <a href="#">Nav item #3 </a>
                    </li>
                    <li>
                        <a href="#">Nav item #4 </a>
                        <ul>
                            <li>
                                <a href="#">Sub nav item #4.1 </a>
                                <ul>
                                    <li>
                                        <a href="#">Dropdown Item #4.1.1</a>
                                    </li>
                                    <li>
                                        <a href="#">Dropdown Item #4.1.2</a>
                                    </li>
                                    <li>
                                        <a href="#">Dropdown Item #4.1.3</a>
                                    </li>
                                    <li>
                                        <a href="#">Dropdown Item #4.1.4</a>
                                    </li>
                                </ul>
                            </li>
                            <li>
                                <a href="#">Sub nav item #4.2 </a>
                            </li>
                            <li>
                                <a href="#">Sub nav item #4.3 </a>
                            </li>
                        </ul>
                    </li>

                </ul>
            </nav>
        </header>
    </div>
</body>
</html>
